<template>
  <el-dialog title="新建文件" :visible.sync="dialogVisible" top="8vh" :before-close="cancel">
    <el-form :model="file" label-width="85px" :rules="rules" ref="ruleForm">
      <el-form-item label="文件主题" prop="fileName">
        <el-input v-model="file.fileName" clearable></el-input>
      </el-form-item>
      <el-form-item label="文件类型" prop="fileType">
        <el-select v-model="file.fileType" filterable clearable>
          <el-option v-for="item in fileTypes" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="关键字">
        <el-input type="textarea" v-model="file.fileKeyWord"></el-input>
      </el-form-item>
      <el-form-item label="所属文件夹">
        <folder-select-tree :tree-data="treeData" @onClickNode="onClickNode"></folder-select-tree>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="sure">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import FolderSelectTree from '../../../components/folderSelectTree'
  import {Msg} from '../../../tools/message'
  import {fileService} from '../../../service/fileService'
  import {mapState} from 'vuex'

  export default {
    name: 'fileDialog',
    components: {FolderSelectTree},
    data () {
      return {
        file: {},
        fileTypes: ['doc', 'xls', 'ppt', 'png', 'jpg', 'pdf', 'gif', 'txt'],
        rules: {
          fileName: [{required: true, message: '请输入文件主题', trigger: 'blur'}],
          fileType: [{required: true, message: '请选择文件类型', trigger: 'blur'}]
        }
      }
    },
    props: {
      dialogVisible: {
        type: Boolean,
        default: function () {
          return false
        }
      }
    },
    computed: mapState({
      treeData: state => state.folder.folderTree
    }),
    methods: {
      cancel () {
        this.file = {}
        this.$emit('cancel')
      },
      sure () {
        this.$refs['ruleForm'].validate(valid => {
          if (valid) {
            this.submit()
          } else {
            return false
          }
        })

      },
      submit () {
        this.file.userId = this.$store.getters.userInfo.userId
        this.file.fileTheme = this.file.fileName
        if (!this.file.folderId) {
          this.file.folderId = this.$store.state.folder.currentPath.folderId
        }

        fileService.createFile(this.file).then(res => {
          if (res.data.status) {
            Msg.success(res.data.msg)
            this.file = {}
            this.$emit('sure')
          } else {
            Msg.error(res.data.msg)
          }
        }).catch(error => {
          Msg.error(error)
        })
      },
      onClickNode (path, id) {
        this.file.filePath = path
        this.file.folderId = id
      },
      // createDefaultVal () {
      //   let path = '/'
      //   let value = this.$store.state.folder.currentPath.paths
      //   value.forEach(v => {
      //     path += v + '/'
      //   })
      //   this.file.filePath = path.substring(0, path.length - 1)
      //   this.file.folderId = this.$store.state.folder.currentPath.folderId
      // }
    },
    // create () {
    //   this.createDefaultVal()
    // }
  }
</script>

<style lang="scss" scoped>

</style>
